<template>
  <view class="modifyPhone">
    <view class="Form">
      <view class="flex_al_cen_ju_bet">
        <view>卡号</view>
        <view class="flex scanCode_card">
          <text class="">请绑定持卡人本人的银行卡</text>
          <image
            class="scanCode"
            src="../../static/images/pulice/scanCode.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="flex_al_cen_ju_bet">
        <view>卡类型</view>
        <view @click="PickerShow = !PickerShow">借记卡</view>
      </view>
      <view class="flex_al_cen_ju_bet">
        <view>开户银行</view>
        <u-input
          placeholder="请输入开户银行"
          inputAlign="right"
          border="none"
          type="phone"
          v-model="user.Oldphone"
        ></u-input>
      </view>
      <view class="flex_al_cen_ju_bet">
        <view>手机号</view>
        <u-input
          placeholder="请输入银行卡预留手机号"
          inputAlign="right"
          border="none"
          type="phone"
          v-model="user.Newphone"
        ></u-input>
      </view>
    </view>
    <!-- 同意协议 -->
    <view class="agreement flex">
      <u-checkbox-group
        v-model="checkboxValue"
        placement="column"
        @change="checkboxChange"
      >
        <u-checkbox activeColor="#0c22b0" :name="true"> </u-checkbox>
      </u-checkbox-group>
      <view>
        我已同意并签署 <span class="color1">《外卖狮支付服务协议》</span>
      </view>
    </view>
    <view class="confirmChange" @click="confirmChange">提交</view>
  </view>

  <!-- picker -->
  <u-picker
    :show="PickerShow"
    :columns="columns"
    @cancel="PickerShow = !PickerShow"
    @confirm="confirm"
  ></u-picker>
  <u-toast ref="uToast"></u-toast>
</template>
<script setup lang="ts">
import { reactive, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
// 协议按钮
const checkboxValue = ref([]);
const checkboxChange = (value: never[]) => {
  checkboxValue.value = value;
};
// 卡组
const PickerShow = ref(false);
const columns = reactive([["借记卡"]]);
const confirm = () => {};
// 页面form
const user = reactive({
  Oldphone: "",
  Newphone: "",
  code: "",
});
const confirmChange = () => {
  if (!checkboxValue.value[0]) {
    return proxy.$API(proxy).Toast("请先勾选协议", "error");
  }
  if (!user.Oldphone.trim()) {
    return proxy.$API(proxy).Toast("原手机号不能为空", "error");
  }
  if (!user.Newphone.trim()) {
    return proxy.$API(proxy).Toast("新手机号不能为空", "error");
  }
  if (!user.code.trim()) {
    return proxy.$API(proxy).Toast("验证码不能为空", "error");
  }
};
</script>
<style lang="scss" scoped>
@import "../../static/css/BankCard/addCard.scss";
</style>
